<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/game_hall.css">
</head>
<body>
    <div class="nav">网络五子棋对战游戏</div>
    <!-- 整个页面的容器元素 -->
    <div class="container">
        <!-- 这个 div 在 container 中是处于垂直水平居中这样的位置的 -->
        <div>
            <!-- 展示用户信息 -->
            <div id="screen"></div>
            <!-- 匹配按钮 -->
            <div id="match-button">开始匹配</div>
        </div>
    </div>

    <script src="./js/jquery.min.js"></script>
    <script>
        var ws_url = "ws://" + location.host + "/hall";
        var ws_hdl = null;

        var button_flag = "stop";
        //点击按钮的事件处理：
        var be = document.getElementById("match-button");
        be.onclick = function() {
            if (button_flag == "stop") {
                //1. 没有进行匹配的状态下点击按钮，发送对战匹配请求
                var req_json = {
                    optype: "match_start"
                }
                ws_hdl.send(JSON.stringify(req_json));
            }else {
                //2. 正在匹配中的状态下点击按钮，发送停止对战匹配请求
                var req_json = {
                    optype: "match_stop"
                }
                ws_hdl.send(JSON.stringify(req_json));
            }
        }

        function get_user_info() {
            $.ajax({
                url:"/info",
                type:"get",
                success:function(res) {
                    var info_html = "<p>" + "用户：" + res.name + " 积分：" + res.score + 
                        "</br>" + "比赛场次：" + res.total_count + " 获胜场次：" + res.win_count + "</p>";
                    var screen_div = document.getElementById("screen");
                    screen_div.innerHTML = info_html;

                    ws_hdl = new WebSocket(ws_url);
                    ws_hdl.onopen = ws_open;
                    ws_hdl.onclose = ws_close;
                    ws_hdl.onmessage = ws_message;
                    ws_hdl.onerror = ws_error;
                },
                error:function(xhr) {
                    alert(xhr.responseJSON.reason);
                    location.replace("/login.html");
                }
            })
        }
        function ws_open() {
            console.log("ws open");
        }
        function ws_close() {
            console.log("ws close");
        }
        function ws_message(evt) {
            var rsp_json = JSON.parse(evt.data);
            if(rsp_json.result == false)
            {
                alert(rsp_json.reason);
                window.location.assign("/login.html");
                return;
            }

            if(rsp_json.optype == "hall_ready")
            {
                console.log("连接建立成功！");
            }
            else if(rsp_json.optype == "match_start")
            {
                console.log("开始匹配");
                button_flag = "start";
                be.innerHTML = "匹配中...点击取消匹配";
            }
            else if(rsp_json.optype == "match_stop")
            {
                console.log("停止匹配");
                button_flag = "stop";
                be.innerHTML = "开始匹配";
            }
            else if(rsp_json.optype == "match_success")
            {
                alert("匹配成功");
                window.location.assign("/game_room.html");
            }
        }
        function ws_error() {

        }
        get_user_info();
    </script>
</body>
</html>